<template>
    <el-dialog :title="this.$root.lang.userinfo.buy.title" :visible.sync="showDialog" @close="closeDialog" width="50%"  :close-on-click-modal="false" :close-on-press-escape="false">
      <el-form @submit.native.prevent class="change-password" :model="form" ref="form" :rules="rules" size="small" label-position="right" label-width="110px">
        <el-form-item :label="$root.lang.userinfo.buy.num" prop="num">
          <el-input type="number" v-model="form.num" disabled></el-input>
        </el-form-item>
        <el-form-item>
          <span>{{ this.$root.lang.userinfo.buy.money }}：</span><span class="moneyReal">{{ form.moneyReal }}</span><span class="moneyShow">{{ form.moneyShow }}</span>
        </el-form-item>
        <el-form-item>
          <el-button class="dialog-btn" @click="onSubmit()" :loading="loading" type="primary" >{{ this.$root.lang.userinfo.buy.confirm }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
</template>

<script>
export default {
  name: 'EditStock',
  data() {
    return {
    	loading: false,
    	showDialog: this.show,
    	form: {
    		num: 100,
        moneyReal: '￥0',
        moneyShow: '￥100',
    	},
    	rules: {
        num: [
          { required: true, message: this.$root.lang.userinfo.buy.rule.num, trigger: 'blur' }
        ],
      },
    }
  },
  watch: {
    show: function (value) {
      if(this.$refs['form']) this.$refs['form'].resetFields()
      this.showDialog = value
  	},
  },
  props: {
  	show: {
      type: Boolean,
      default: false
    },
    type: {
    	type: String,
    	default: ''
    }
  },
  methods: {
  	closeDialog() {
      this.$emit('editReceive',{
        key: 'showEdit',
        value: this.showDialog
      })
    },
    onSubmit() {
    	this.$refs['form'].validate((valid) => {
        if(valid) {
        	this.editInfo()
        }else{
          return false
        }
      })
    },
  	editInfo () {
      this.loading = true
      this.request({
        url: '/system/stock/accumulation?stockType=' + this.type,
        method: 'get',
      }).then(response => {
        this.loading = false
        this.$message({
          message:  this.$root.lang.confirm.buySuccess,
          type: 'success',
          duration: 3 * 1000
        })
        this.showDialog = false
				this.$emit('reload')
      }).catch(error => {
        this.loading = false
        this.$message({
          message: error.errmsg,
          type: 'error',
          duration: 3 * 1000
        })
      })
    },
  },
  created() {

  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.moneyReal {
  font-size: 18px;
  margin-right: 15px;
  color: red;
}
.moneyShow {
  text-decoration: line-through
}
</style>